<template>
  <div
    style="padding: 8px; height: 100%;
    box-sizing: border-box;"
  >
    <el-table v-loading="loading" :data="lists" size="small" style="width: 100%" height="100%">
      <el-table-column
        v-for="col in tableColumns"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :key="col.prop"
      >
        <template slot-scope="scope">
          <span v-if="col.type === 'time'"> {{ scope.row[col.prop] | format }}</span>
          <span class="state" v-else-if="col.type === 'state'" :class="scope.row[col.prop]">
            {{ scope.row[col.prop] }}
          </span>
          <span v-else>{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-popconfirm
            v-if="scope.row.state == 'running'"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定停止吗？"
            @onConfirm="handleStop(scope.$index, scope.row)"
          >
            <el-button slot="reference" size="mini" type="danger" icon="el-icon-video-pause" circle></el-button>
          </el-popconfirm>
          <el-link type="primary" @click="downloadlog(scope.$index, scope.row)">日志下载</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "WorkflowBackfill",
  data() {
    return {
      lists: [],
      tableColumns: [
        {
          prop: "dag_id",
          label: "工作流ID",
          width: "350"
        },
        {
          prop: "start_date",
          label: "开始时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "end_date",
          label: "结束时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "state",
          label: "状态",
          type: "state"
          // width: "80"
        }
      ],
      loading: false
    };
  },
  computed: {
    ...mapState({
      currentTab: ({ data }) => {
        return data.currentTab || {};
      }
    })
  },
  watch: {
    ["currentTab.id"](newval) {
      this.initData();
    }
  },
  mounted() {
    this.initData();
    this.$bus.$on("refresh-workflow-backfill", () => {
      this.initData();
    });
  },
  methods: {
    initData() {
      this.loading = true;
      this.$http.workflow
        .getBackfillHistory({ id: this.currentTab.id })
        .then(res => {
          this.lists = res;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleStop(index, row) {
      this.$http.workflow
        .stopBackfill({
          id: row.id,
          dag_id: row.dag_id,
          start_date: row.start_date,
          execution_date: row.execution_date
        })
        .then(res => {
          this.initData();
        });
    },
    downloadlog(index, row) {
      this.$http.task.downloadTaskLog({
        hostname: row.hostname,
        operator: row.operator,
        start: -1000
      }).then(res => {
        const blob = new Blob([res], { type: "application/octet-stream" });
        let dom = document.createElement("a");
        let url = window.URL.createObjectURL(blob);
        dom.href = url;
        dom.download = decodeURI(row.hostname + ".log");
        dom.style.display = "none";
        document.body.appendChild(dom);
        dom.click();
        dom.parentNode.removeChild(dom);
        window.URL.revokeObjectURL(url);
      });
    }
  }
};
</script>


<style lang="scss" scoped>
  .state{
    display: inline-block;
    text-align: center;
    height: 25px;
    border-radius: 15%;
    color: white;
    &.failed{
      width: 50px;
      background:#CC3366;
    }
    &.success{
      width: 60px;
      background:#00CC33;
    }
    &.shutdown{
      width: 65px;
      background:#990099;
    }
    &.running{
      width: 65px;
      background:#3366FF;
    }
    &.queued{
      width: 60px;
      background:gray;
    }
    &.up_for_retry{
      width: 100px;
      background: gold;
    }
    &.up_for_reschedule{
      width: 120px;
      background: turquoise;
    }
    &.upstream_failed{
      width: 120px;
      background: orange;
    }
    &.skipped{
      width: 65px;
      background: pink;
    }
    &.removed{
      width: 65px;
      background: lightgrey;
    }
    &.scheduled{
      width: 70px;
      background: tan;
    }
    &.none{
      width: 60px;
      background: lightblue;
    }
    &.sensing{
      width: 70px;
      background: lightseagreen;
    }
  }

</style>